<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>店铺</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style></style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="lineGrey"></div>
        <div class="dp-no-withdrawal" @click="doWithdrawal">
            <div v-if="balanceList&&balanceList.length>0">
                <div class="dp-withdrawal-num">未提现合计：{{totalBalance}} 元</div>
                <div class="dp-withdrawal-item flex-x-s" v-for="(item,index) in balanceList" :key="index" @click="doWithdrawal(item)">
                    <div class="select">
                        <img :src="item.selected ? 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/selected.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/no_select.png'" alt="">
                    </div>
                    <div class="dp-withdrawal-info">
                        <div class="f1">{{item.orderSn}}</div>
                        <div class="f2 flex-x-sb">
                            <div class="money">
                                <span>¥</span>{{Number(item.amount).toFixed(2)}}
                            </div>
                            <div>{{item.createTime | handleTime}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="collect-empty" v-show="balanceList.length===0">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                <div>暂无数据～</div>
            </div>
        </div>
        <div class="dp-withdrawal-btn flex-x-sb">
            <div class="dp-withdrawal-btn-info flex-x-s" @click="doSelectAll">
                <img :src="selectAll?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/selected.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/no_select.png'" alt="">
                <span>总计 :</span>
                <span>¥</span>
                <span>{{total}}</span>
            </div>
            <div class="btn" @click="requestWithDraw">
                提现
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    totalBalance: 0,
                    balanceList: [],
                    queryInfo: {
                        pageNum: 1,
                        pageSize: 10,
                        status:'UN'
                    },
                    hasNext: true,
                    selectAll: false,
                    total: 0
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                        m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
                    }
                },
                created() {},
                mounted() {
                    this.getBalance();
                    this.totalBalance = api.pageParam.shopBalance.unWithdraw
                    $api.fixTabBar($api.dom('.dp-withdrawal-btn'))
                },
                computed: {


                },
                methods: {
                    getBalance() {
                        var vm = this;
                        mime('getBalance')(vm.queryInfo, function(ret){
                            ret.data.list.map(item => {
                                vm.$set(item, "selected", false)
                            })
                            if(vm.queryInfo.pageNum == 1){
                                vm.selectAll = false;
                                vm.total = 0;
                                vm.balanceList = ret.data.list
                            }else{
                                vm.balanceList = vm.balanceList.concat(ret.data.list)
                            }
                            vm.hasNext = ret.data.hasNext
                        })
                    },
                    requestWithDraw() {
                        const vm = this;
                        var orderIds = []
                        vm.balanceList.map((item, index, arr) => {
                            if (item.selected){
                                orderIds.push(item.orderId)
                            }
                        })
                        if (orderIds.length === 0) {
                            return ;
                        }
                        fnPost(interfaces.ORDER_MODULE.WITHDRAW.REQUEST_WITHDRAW, {
                                "memo": "",
                                "orderIds": orderIds
                            },
                            function(ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    toastBottom("提现成功,请等待管理员审核")
                                    vm.getBalance()
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },
                    doWithdrawal(item) {
                        item.selected = !item.selected;
                        if (this.balanceList.every(item => item.selected)) this.selectAll = true;
                        else this.selectAll = false;
                        this.calcTotal();
                    },
                    doSelectAll() {
                        this.selectAll = !this.selectAll;;
                        this.balanceList.forEach((it, idx) => {
                            it.selected = this.selectAll;

                        })
                        this.calcTotal();
                    },
                    calcTotal() {
                        var totalBalance = 0;
                        this.balanceList.forEach((it, idx) => {
                                if (it.selected) {
                                    totalBalance += parseInt(it.amount)
                                }
                            })
                        this.total = totalBalance;
                    }
                },
            })
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function(ret, err) {
                vm.queryInfo.pageNum = 1;
                vm.getBalance();
                api.refreshHeaderLoadDone()
            });

            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function(ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++
                    vm.getBalance();
                }
            });
        }
    </script>
</body>

</html>
